<template>
  <div>
    <h2>日本</h2>
    <div class="box1">
      <router-link to="/japan/cute">可爱</router-link>
      <router-link to="/japan/pure">清纯</router-link>
      <router-link to="/japan/sexcy">性感</router-link>
      <router-link to="/japan/sweet">甜美</router-link>
    </div>
    <div class="btn">
      <button @click="$router.push(`${teachers[random()]}`)">随机显示</button>
    </div>
    <div class="box2">
      <router-view></router-view>
    </div>
  </div>
</template>

<script>
export default {
  data() {
    return {
      teachers: ['/japan/cute', '/japan/pure', '/japan/sexcy', '/japan/sweet'],
    }
  },
  methods: {
    random() {
      return Math.floor(Math.random() * this.teachers.length)
    },
  },
}
</script>

<style scoped>
h2 {
  text-align: center;
}
.box1 {
  display: flex;
  justify-content: space-evenly;
}
.box2 {
  text-align: center;
}
img {
  width: 300px;
  height: 450px;
}
.btn {
  margin: 20px auto;
  text-align: center;
}
</style>
